<script setup>
  import {
    navigateBack,
  } from "@/assets/scripts/navigate.js"
  import {
    getSignInListApi,
  } from '@/assets/api/other/signIn.js'
  import {
    onMounted,
    ref
  } from "vue";

  const signInList = ref([])
  const pageNum = ref(1)
  const total = ref(10)
  const loading = ref(true)

  onMounted(() => {
    signInList_init() // 签到记录
  })

  const handleMore = () => {
    if (loading.value) return
    loading.value = true
    pageNum.value = pageNum.value + 1
    signInList_init() // 请求记录数据
  }

  const signInList_init = async () => {
    const user = uni.getStorageSync('user')
    const res = await getSignInListApi(user.userId)
    if (res.code === 200) {
      total.value = res.total
      const rows = res.total <= (pageNum.value - 1) * 10 ? [] : res.rows
      signInList.value = [...signInList.value.slice(0, (pageNum.value - 1) * 10), ...rows]
      loading.value = false
    }
  }
</script>

<template>
  <view>
    <uv-navbar :fixed="false" bgColor="#f5f5f5" @leftClick="navigateBack" title="积分记录">
    </uv-navbar>

    <uv-row class="px-normal pt-normal" v-if="!signInList.length">
      <uv-col class="bg-grey border-r">
        <view class="p-normal ">
          <uv-empty mode="list"></uv-empty>
        </view>
      </uv-col>
    </uv-row>

    <view class="p-normal">
      <view class="bg-grey mb-normal border-r" v-for="(item, index) in signInList" :key="index">
        <view class="p-normal d-flex d-flex-aic">
          <view class="d-flex-fx1">
            <view class="font-fs20 font-wb color-green">
              1个积分
            </view>
            <!-- <view class="font-fs14 mt-2 color-grey">
	                        连续签到第1天
	                    </view> -->
            <view class="font-fs14 mt-2 color-grey">
              签到时间: {{item.signDate}}
            </view>
          </view>
          <view class="d-flex d-flex-aic d-flex-fs0 font-fs14">
            <uv-icon name="checkmark-circle-fill" color="#12b886" size="22"></uv-icon>
            <view class="color-deepGrey ml-small">
              获取成功
            </view>
          </view>
        </view>
      </view>
    </view>

    <uv-button class="mb-normal" style="width: 100%;" v-if="!loading && total > pageNum * 10" type="success" text="查看更多"
      @click="handleMore"></uv-button>
  </view>
</template>

<style lang="scss" scoped>
  .bg-grey {
    background-color: #f5f5f5;
  }

  .mt-2 {
    margin-top: 2px;
  }

  .color-grey {
    color: #9c9a9b;
  }

  .color-deepGrey {
    color: #666666;
  }

  .color-green {
    color: #12b886;
  }

  .border-r {
    border-radius: 8px;
    overflow: hidden;
  }
</style>